<template>
	<section> 
		<el-row class="post_comment_line"></el-row>
		<el-row >
			<el-col :span="24">
				<editor v-if="questionId" ref="context0" :key="'context0'+questionId" v-model="addForm.context" auto-complete="off"></editor>
			</el-col> 
			<el-col :span="8" style="color:#8590a6;"></el-col>
			<el-col  :offset="16" style="margin-top: 5px;"><el-button type="primary" @click="addSubmit">提交答案</el-button><el-button type="primary" @click="getAqComments">浏览其它答案</el-button></el-col> 
		</el-row>
		<el-row> 

			<el-row v-for="(o,index) in aqComments" :key="index">
				<el-row>
					<el-col :span="1" style="text-align:left;">
						<img src="../../../../../assets/image/user_img.gif"  style="text-align:left; width:40px;height:40px;"></img>
					</el-col>
					<el-col :span="22">
						<el-row style=" margin-bottom:5px;">
							<el-col :span="14" style="text-align:left;">{{o.username}} <span style="color:#8590a6">{{o.toUsername!=null && o.toUsername!=''?'回复':''}}</span> {{o.toUsername}}</el-col>
							<el-col :offset="16" style="color:#8590a6;text-align:righ;"><span>{{o.createDate}}</span></el-col>
						</el-row>
						<el-row>
							<div v-if="o.isShow=='1'" v-html="o.context"> </div>
							<div v-if="o.isShow=='0'">该评论不可见</div>
						</el-row>
						<el-row>
							 <el-col :offset="16"><el-button type="text" @click="praiseHandle(o)">赞[{{o.praiseSum}}]</el-button><el-button type="text" @click="handleReply(o,o)">{{o._reply==false?'回复':'隐藏回复'}}</el-button><el-button v-if="o.isShow=='1'  && isMng=='1' " type="text" @click="unShowOneComment(o)">关闭</el-button><el-button  v-if="o.isShow=='0'  && isMng=='1' " type="text" @click="showOneComment(o)">打开</el-button><el-button type="text" @click="getAqCommentsByPcommentId(o)">查看全部跟帖</el-button></el-col>
						</el-row>
						<el-row v-if="o._reply==true">
							<el-col :span="24"><editor :id="'context'" ref="context" v-model="addForm.context" auto-complete="off"></editor></el-col>
							<el-col  :offset="20" style="margin-top: 5px;"><el-button type="primary" @click="addSubmit">发表</el-button></el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row v-if=" o.children !=undefined && o.children!==null && o.children.length > 0 " >
					<el-col :offset="1" :span="23" v-for=" (o1,idx) in o.children" :key="idx">
						<el-col :span="1" style="text-align:left;">
							<img src="../../../../../assets/image/user_img.gif"  style="text-align:left; width:40px;height:40px;"></img>
						</el-col>
						<el-col :span="22">
							<el-row  style=" margin-bottom:5px;">
							<el-col :span="14" style="text-align:left;">{{o1.username}} <span style="color:#8590a6">{{o1.toUsername!=null && o1.toUsername!=''?'回复':''}}</span> {{o1.toUsername}}</el-col>
							<el-col :offset="16" style="color:#8590a6;text-align:righ;"><span >{{o1.createDate}}</span></el-col>
							</el-row>
							<el-row>
								<div v-if="o1.isShow=='1'" v-html="o1.context"> </div>
								<div v-if="o1.isShow=='0'">该评论不可见</div>
							</el-row>
							<el-row>
								 <el-col :offset="16"><el-button type="text"  @click="praiseHandle(o1)">赞[{{o1.praiseSum}}]</el-button><el-button type="text" @click="handleReply(o,o1)">{{o1._reply==false?'回复':'隐藏回复'}}</el-button><el-button v-if="o1.isShow=='1' && isMng=='1'" type="text" @click="unShowOneComment(o1)">关闭</el-button><el-button  v-if="o1.isShow=='0' && isMng=='1'" type="text" @click="showOneComment(o1)">打开</el-button></el-col>
							</el-row>
							<el-row v-if="o1._reply==true">
								<el-col :span="24"><editor :id="'context1'" ref="context1" v-model="addForm.context" auto-complete="off"></editor></el-col>
								<el-col  :offset="20" style="margin-top: 5px;"><el-button type="primary" @click="addSubmit">发表</el-button></el-col>
							</el-row>
						</el-col>					
					</el-col>
					<el-col>
						<el-pagination  size="small" layout="total, sizes, prev, pager, next"   @current-change="handleChildrenCurrentChange" :current-page="pageInfo.children.pageNum" :page-size="pageInfo.children.pageSize"  :total="pageInfo.children.total" style="float:right;"></el-pagination> 
					</el-col> 
				</el-row>
				<el-row class="line"></el-row>
			</el-row>
			<el-pagination v-if="showPageInfo==true" size="small" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination> 
		
			<!--编辑 AqComment 档案评论表界面-->
			<el-dialog title="编辑评论" :visible.sync="editFormVisible"  width="50%"  :close-on-click-modal="false">
				  <aq-comment-edit :aq-comment="editForm" :visible="editFormVisible" @cancel="editFormVisible=false" @submit="afterEditSubmit"></aq-comment-edit>
			</el-dialog>
		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util';//全局公共库
	import { listAqComment, delAqComment, batchDelAqComment, showComment, unShowComment, addAqComment, praiseComment } from '@/api/mdp/arc/aq/aqComment';
 	import Editor from '@/components/Tinymce';  
	import { mapGetters } from 'vuex'
	
	export default { 
		computed: {
		    ...mapGetters([
		      'userInfo'
		    ])
		},
		props:['questionId','isMng'],
		watch:{
			questionId : function( questionId ){
				if(questionId==this.questionId_){
					return;
				}
				this.questionId_=questionId;
				this.showPageInfo=false;
				this.pageInfo={//分页数据
					total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算.
					pageSize:10,//每页数据
					pageNum:1,//当前页码、从1开始计算
					orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
					orderDirs:[],//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
					children: {
						total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算. 
						pageSize:10,//每页数据
						pageNum:1,//当前页码、从1开始计算
						orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
						orderDirs:[],//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
					}
				},
				this.aqComments=[]
			}
		},
		data() {
			return {
				filters: {
					key: '',
					isShow:'',
					lvl:'0'
				},
				aqComments: [],//查询结果
				questionId_:'',
				pageInfo:{//分页数据
					total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算.
					pageSize:10,//每页数据
					pageNum:1,//当前页码、从1开始计算
					orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
					orderDirs:[],//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
					children: {
						total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算. 
						pageSize:10,//每页数据
						pageNum:1,//当前页码、从1开始计算
						orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
						orderDirs:[],//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
					}
				},
				load:{ list: false, edit: false, del: false, add: false },//查询中...
				sels: [],//列表选中数据
				options:{},//下拉选择框的所有静态数据 options.sex,options.project
				
				addFormVisible: false,//新增aqComment界面是否显示
				//新增aqComment界面初始化数据
				addForm: {
					id:'',userid:'',username:'',star:'',context:'',createDate:'',questionId:'',pcommentId:'',praiseSum:'0',isShow:'0',toUserid:'',toUsername:'',lvl:'0',branchId:''
				},
				
				editFormVisible: false,//编辑界面是否显示
				//编辑aqComment界面初始化数据
				editForm: {
					id:'',userid:'',username:'',star:'',context:'',createDate:'',questionId:'',pcommentId:'',praiseSum:'0',isShow:'0',toUserid:'',toUsername:'',lvl:'0',branchId:''
				},
				/**begin 自定义属性请在下面加 请加备注**/
				pcomment:{
					id:'',userid:'',username:'',star:'',context:'',createDate:'',questionId:'',pcommentId:'',praiseSum:'0',isShow:'0',toUserid:'',toUsername:'',lvl:'0',branchId:''
				},
				showPageInfo:false
				/**end 自定义属性请在上面加 请加备注**/
			}
		},//end data
		methods: { 
			handleSizeChange(pageSize) { 
				this.pageInfo.pageSize=pageSize;
				this.pageInfo.count=true;
				
				this.getAqComments();
			},
			handleCurrentChange(pageNum) {
				this.pageInfo.pageNum = pageNum;
				this.getAqComments();
			},
			handleChildrenCurrentChange(pageNum) {
				this.pageInfo.children.pageNum = pageNum;
				this.getAqCommentsByPcommentId(this.editForm);
			},
			// 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
			sortChange( obj ){
				var dir='asc';
				if(obj.order=='ascending'){
					dir='asc'
				}else{
					dir='desc';
				}
				if(obj.prop=='xxx'){
					this.pageInfo.orderFields=['xxx'];
					this.pageInfo.orderDirs=[dir];
				}
				this.getAqComments();
			},
			searchAqComments(){
				 
				 
				 this.pageInfo.count=true;
				 this.getAqComments();
			},
			//获取列表 AqComment 档案评论表
			getAqComments() {
				this.showPageInfo=true;
				let params = {
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					total: this.pageInfo.total,count:this.pageInfo.count
				};
				if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
					let orderBys=[];
					for(var i=0;i<this.pageInfo.orderFields.length;i++){ 
						orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
					}  
					params.orderBy= orderBys.join(",")
				}
				if(this.filters.key!==""){
					params.username = '%'+this.filters.key+'%'
					params.context = '%'+this.filters.key+'%'
				}
				if(this.filters.isShow!==""){
					params.isShow=this.filters.isShow
				} 
				params.branchId=this.userInfo.branchId
				params.questionId=this.questionId;
				this.load.list = true;
				listAqComment(params).then((res) => {
					var tips=res.data.tips;
					console.log(res.data.data);
					if(tips.isOk){ 
						this.pageInfo.total = res.data.data.total;this.pageInfo.count=false;
						res.data.data.forEach(i=>{
							i._reply=false
							i.children=[]
							});
						this.aqComments = res.data.data;
					}else{
						this.$message({ message: tips.msg, type: 'error' });
					} 
					this.load.list = false;
				}).catch(() => {
					this.load.list = false;
					//this.$message({ message: '通讯错误', type: 'error' });
				});
			},
			//获取列表 AqComment 档案评论表
			getAqCommentsByPcommentId(pcomment) {
				this.editForm=pcomment;
				let params = {
					pageSize: this.pageInfo.children.pageSize,
					pageNum: this.pageInfo.children.pageNum,
					total: this.pageInfo.children.total
				};
				if(this.pageInfo.children.orderFields!=null && this.pageInfo.children.orderFields.length>0){
					params.orderFields=this.pageInfo.children.orderFields;
					params.orderDirs=this.pageInfo.children.orderDirs;
				} 
				this.load.list = true;
				params.pcommentId=pcomment.id
				listAqComment(params).then((res) => {
					var tips=res.data.tips;
					if(tips.isOk){ 
						this.pageInfo.children.total = res.data.data.total;
						console.log(res.data.data);
						res.data.data.forEach(i=>{
							i._reply=false
							i.children=[]
							});
						pcomment.children=res.data.data;
						//pcomment.children.push(res.data.data);
					}else{
						this.$message({ message: tips.msg, type: 'error' });
					} 
					this.load.list = false;
				}).catch(() => {
					this.load.list = false;
					//this.$message({ message: '通讯错误', type: 'error' });
				});
			},
			batchShowComment: function(){
				let ids=this.sels.map(i=>i.id);
				this.load.edit=true
				showComment(ids).then(res=>{
					this.load.edit=false
					this.getAqComments();
				})
			},
			batchUnShowComment: function(){
				this.load.edit=true
				let ids=this.sels.map(i=>i.id);
				unShowComment(ids).then(res=>{
					this.load.edit=false
					this.getAqComments();
				})
			},
			//显示编辑界面 AqComment 档案评论表
			showEdit: function ( row,index ) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面 AqComment 档案评论表
			showAdd: function () {
				this.addFormVisible = true;
				//this.addForm=Object.assign({}, this.editForm);
			},
			afterAddSubmit(){
				this.addFormVisible=false;
				this.pageInfo.count=true;
				this.getAqComments();
			},
			addSubmit(){ 
				let params = {praiseSum:0,questionId:this.questionId,userid:this.userInfo.userid,username:this.userInfo.username,pcommentId:this.pcomment.id,context:this.addForm.context,isShow:'1',toUserid:this.editForm.userid,toUsername:this.editForm.username }
				if(this.pcomment.id==='' || this.pcomment.id==null){
					params.lvl=0;
					
				}
				params.branchId=this.userInfo.branchId
				console.log(params);
				addAqComment(params).then(res=>{
					if(res.data.tips.isOk){
						this.$message.info('提交成功');
						this.editForm._reply=false;
						res.data.data.children=[];
						res.data.data._reply=false;
						this.pcomment.children.push(res.data.data);
					}
				});
			},
			afterEditSubmit(){
				this.editFormVisible=false;
			},
			//选择行aqComment
			selsChange: function (sels) {
				this.sels = sels;
			}, 
			//删除aqComment
			handleDel: function (row,index) {
				this.load.del=true;
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => { 
					let params = { id: row.id };
					delAqComment(params).then((res) => {
						this.load.del=false;
						var tips=res.data.tips;
						if(tips.isOk){ 
							this.pageInfo.count=true;
							this.getAqComments();
						}
						this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
					});
				}).catch(() => {
					this.load.del=false;
				});
			},
			//批量删除aqComment
			batchDel: function () {
				this.load.del=true;
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => { 
					batchDelAqComment(this.sels).then((res) => {
						this.load.del=false;
						var tips=res.data.tips;
						if( tips.isOk ){ 
							this.pageInfo.count=true;
							this.getAqComments(); 
						}
						this.$message({ message: tips.msg, type: tips.isOk?'success':'error'});
					});
				}).catch(() => {
					this.load.del=false;
				});
			},
			rowClick: function(row, event, column){
				this.$emit('row-click',row, event, column);//  @row-click="rowClick"
			},
			/**begin 自定义函数请在下面加**/
			showAq: function( row,index ){
				this.$router.push({ path: '/mdp/arc/aq/AqDetail/'+row.questionId })
			},
			handleReply(pcomment,comment){
				this.editForm=comment;
				this.pcomment=pcomment;
				if(comment._reply==undefined || comment._reply==false){
					comment._reply=true
				}else{
					comment._reply=false
				}
			},
			praiseHandle(comment){
				praiseComment({id:comment.id}).then(res=>{
					if(res.data.tips.isOk){
						comment.praiseSum=parseInt(comment.praiseSum)+1;
					}else{
						this.$message({ message: tips.msg, type: 'error' }); 
					}
				});
			},
			showOneComment(comment){
				showComment([comment.id]).then(res=>{
					comment.isShow='1'
				});
			},
			unShowOneComment(comment){
				unShowComment([comment.id]).then(res=>{
					comment.isShow='0'
				});
			}
			/**end 自定义函数请在上面加**/
			
		},//end methods
		components: {   
		    'editor': Editor
		    //在下面添加其它组件
		},
		mounted() { 
			this.$nextTick(() => {
				//this.getAqComments();
        	}); 
		}
	}

</script>

<style scoped>
.post_comment_line {
    height: 40px;
    margin-top:40px;
   
    border-top: 4px solid #404040;
}
.line{
		border-bottom: 1px solid #ccc;  
	    margin-bottom: 20px;
	}
</style>